<template>
	<div style="margin-top: 4%">
		<!-- 产品介绍 -->
		<div class="container">
			<div class="row">
				<com-litle class="col" :data1="{ title: 'PRODUCT', text: '产品介绍', size: 'sm' }"></com-litle>
				<div class="col"></div>
			</div>
			<div class="row p-1"
				style="margin: 5% 0; border-radius: 20px; background: linear-gradient(114deg, #124cff, #43daff 100%, #43daf0); justify-content: center; align-items: center;">
				<div class="row  text-light" style="font-size: 1.5em;font-weight: 500;">INTRODUCE</div>
				<div class="row  m-0 d-flex align-items-center"
					style="padding: 80px 0; background-color: #fff;border-radius: 10px;">
					<div class="col-12 mb-4 col-md-4">
						<img style="width: 20%; border: 1px solid #dce4f2;border-radius: 20px;"
							src="https://www.fluxmq.com/static/img/logo.ac8da07c.svg" alt="">
					</div>
					<div class="col-12  col-md-4">
						<div class="card text-left">
							<div class="card-body">
								<h5 class="card-title blue_text">企业版</h5>
								<p class="card-text blue_text">打造的企业级物联网平台系统</p>
								<p class="card-text"><small
										class="text-muted">永久免费，提供主流协议接入，支持线性水平拓展，多数据源转发（上下游生态丰富）能够适应大部分项目应用场景</small>
								</p>
							</div>
						</div>
					</div>
					<div class="col-12 col-md-4">
						<div class="card text-left">
							<div class="card-body">
								<h5 class="card-title blue_text">企业版</h5>
								<p class="card-text blue_text">打造的企业级物联网平台系统</p>
								<p class="card-text"><small
										class="text-muted">永久免费，提供主流协议接入，支持线性水平拓展，多数据源转发（上下游生态丰富）能够适应大部分项目应用场景</small>
								</p>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="container">
			<div class="row mx-2 py-4" style="border-bottom: 1px solid #ccc;" v-for="item in List" :key="item">
				<div class="col">{{ item.text }}</div>
				<div class="col">
					<img v-if="item.cenT == 'Y'" src="https://www.fluxmq.com/static/img/tick.de68f3f9.svg" alt="">
					<div v-else>{{ item.cenT }}</div>
				</div>
				<div class="col">
					<img v-if="item.rigT == 'Y'" src="https://www.fluxmq.com/static/img/tick.de68f3f9.svg" alt="">
					<div v-else>{{ item.rigT }}</div>
				</div>
			</div>
		</div>
		<div class="container d-flex flex-column justify-content-col-center" style="padding: 8% 0;">
			<div class="row ml-1 f-flex align-items-center justify-content-between">
				<com-litle class="col-6 col-sm-5 col-md-5 "
					:data1="{ title: 'QUOTATION', text: '商务报价', size: 'sm' }"></com-litle>
				<div class="col-12  col-sm-6 col-md-4 d-flex justify-content-center">
					<div class="right_btn rounded-pill" :style="{ color: (active == 1 ? '#1b65ff' : '#000') }"
						@click="handleBtn(1)">
						<img v-if="active == 1" src="https://www.fluxmq.com/static/img/forever1.5daad886.svg" alt="">
						<img v-else src="https://www.fluxmq.com/static/img/forever.d483d827.svg" alt="">
						<div>永久授权</div>
					</div>
					<div @click="handleBtn(0)" class="right_btn rounded-pill"
						:style="{ color: (active == 0 ? '#1b65ff' : '#000') }">
						<img v-if="active == 0" src="https://www.fluxmq.com/static/img/year1.1e96b32a.svg" alt="">
						<img v-else src="https://www.fluxmq.com/static/img/year.9073d1af.svg" alt="">
						<div>按年收费</div>
					</div>
				</div>
			</div>
			<div class="row justify-content-between" style="background-color: #fefefe;margin: 4% 0">
				<div class="col-12  px-4 col-sm-5 mb-4 quo_tai align-items-center text-center " v-for="item in quoList"
					:key="item">
					<div class="d-flex justify-content-center mt-4 align-items-start mb-4">
						<img v-if="active == 1" src="https://www.fluxmq.com/static/img/card-icon.50e3bc06.svg" alt="">
						<img v-else src="https://www.fluxmq.com/static/img/card-icon1.5f4c58fb.svg" alt="">
						<div class="text-left ml-3" style="width: 200px; color:#124cff;">
							<h4 class="mb-3">{{ item.vis }}</h4>
							<div><small>{{ item.header }}</small></div>
						</div>
					</div>
					<h2 class="" style="margin: 10% 0;">面议</h2>
					<div class="d-flex flex-column" style="align-items: center;">
						<div class="mb-2" style="width: 70%;" v-for="item1 in item.List" :key="item1">{{ item1 }}</div>
					</div>
				</div>
				<!-- <div class="col">1</div> -->
			</div>
		</div>
	</div>
</template>

<script>
import ComLitle from '@/components/ComLitle.vue';
export default {
	components: {
		ComLitle
	},
	data() {
		return {
			List: [
				{ text: 'MQTT协议（3.X，5.0）', cenT: 'Y', rigT: 'Y' },
				{ text: '规则引擎', cenT: 'Y', rigT: 'Y' },
				{ text: '数据安全（含ACL）', cenT: 'Y', rigT: 'Y' },
				{ text: '支持集群', cenT: '3个', rigT: '不限' },
				{ text: '系统监控', cenT: 'Y', rigT: 'Y' },
				{ text: '多协议支持', cenT: 'Y', rigT: 'Y' },
				{ text: '性能支持', cenT: '2000TPS（单节点）', rigT: '不限' },
				{ text: '1年免费更新', cenT: 'Y', rigT: 'Y' },
				{ text: '服务时间', cenT: '5*8', rigT: '7*8' },
				{ text: '远程协助', cenT: 'Y', rigT: 'Y' },
				{ text: '紧急BUG修复', cenT: 'Y', rigT: 'Y' },
				{ text: '培训指导', cenT: 'Y', rigT: 'Y' },
				{ text: '响应时间', cenT: '4小时', rigT: '1小时' },
				{ text: '架构指导', cenT: '', rigT: 'Y' },

			],
			quoList: [
				{ vis: '企业版', header: '永久授权/私有化部署', List: ['1年内免费更新', '限制连接设备数2000（单节点）', '并发消息吞吐2000（单节点）', '节点数量3节点', '服务时间5*8', '响应时间4小时', '远程协助', '紧急BUG修复'] },
				{ vis: '旗舰版', header: '永久授权/私有化部署', List: ['1年内免费更新', '不限制连接设备数', '节点数量不限制', '并发消息吞吐不限制', '服务时间7*8', '响应时间1小时', '远程协助', '培训服务', '紧急BUG修复', '集成开发技术指导', '性能/架构指导'] }
			],
			active: 1
		}
	},
	methods: {
		handleBtn(type) {
			let type1 = [
				{
					vis: '企业版',
					header: '永久授权/私有化部署',
					List: [
						'1年内免费更新',
						'限制连接设备数2000（单节点）',
						'并发消息吞吐2000（单节点）',
						'节点数量3节点',
						'服务时间5*8',
						'响应时间4小时',
						'远程协助',
						'紧急BUG修复'
					]
				},
				{
					vis: '旗舰版',
					header: '永久授权/私有化部署',
					List: [
						'1年内免费更新',
						'不限制连接设备数',
						'节点数量不限制',
						'并发消息吞吐不限制',
						'服务时间7*8',
						'响应时间1小时',
						'远程协助',
						'培训服务',
						'紧急BUG修复',
						'集成开发技术指导',
						'性能/架构指导'
					]
				}
			];
			let type0 = [
				{
					vis: '企业版',
					header: '按年付费',
					List: [
						'免费更新',
						'连接设备数2000（单节点）',
						'并发消息吞吐2000TPS（单节点）',
						'节点数量3节点',
						'服务时间5*8',
						'响应时间4小时',
						'远程协助',
						'紧急BUG修复'
					]
				},
				{
					vis: '旗舰版',
					header: '按年付费',
					List: [
						'免费更新',
						'不限制连接设备数',
						'节点数量不限制',
						'并发消息吞吐不限制',
						'服务时间7*8',
						'响应时间1小时',
						'远程协助',
						'培训服务',
						'紧急BUG修复',
						'集成开发技术指导',
						'性能/架构指导'
					]
				}
			];
			this.active = type
			if (type == 0) {
				this.quoList = type0
			}
			else {
				this.quoList = type1
			}

		}
	}
}
</script>

<style lang="scss" scoped>
.card {
	background-color: white;
	border: none;
}

.blue_text {
	color: #4a89ff;
}

.right_btn {
	width: 150px;
	background-color: #f5f8fa;
	display: flex;
	align-items: center;
	padding: 0 10px;
	margin-left: 20px;
	cursor: pointer;

	img {
		width: 40%;
		height: 70%;
	}
}

.quo_tai {
	// width: 30px;
	padding: 3% 0;
	box-shadow: 1rem 1rem 3rem 0 rgba(20, 45, 95, .12);
	border: 1px solid #F5F5F5;
	border-radius: 20px;
}
</style>